<template>
    <div class=" w-full h-full flex flex-col">
        <titleBar :showback="true">电影详细信息</titleBar>
        <div class=" content-box flex-1 overflow-auto" >
            <!-- box-border作用是防止盒子被拉伸 -->
            <!-- 骨架屏 -->
            <van-skeleton :loading="isLoading" animat :row="7">
                <div class=" h-[150px] overflow-hidden relative flex flex-row p-[10px] box-border" :key="item">
                    <!-- 把这个图片当成模糊的背景 由小到大 sm md lg xl-->
                    <img :src="baseURL + movieInfo.movie_pc" class=" w-full h-full object-cover blur-lg absolute -z-10"
                        alt="">
                    <div class=" left w-[110px] h-[100%]">
                        <img :src="baseURL + movieInfo.movie_pc" class="w-full h-full" :alt="movieInfo.movie_name">
                    </div>
                    <ul class="flex-1 right ml-[10px] text-white text-[14px] flex flex-col justify-between">
                        <li class=" text-[20px] font-bold text-[18px]">{{ movieInfo.movie_name }}</li>
                        <li>评分：<span class=" text-warningColor">{{ movieInfo.movie_score }}</span></li>
                        <li>{{ movieInfo.tags }}</li>
                        <li>时长{{ movieInfo.duration }}分钟</li>
                        <li>{{ movieInfo.publicTime }}</li>
                    </ul>
                </div>
                <!-- 按钮 -->
                <div class=" bg-primaryColor h-[32px] m-[10px] 
                  rounded-[5px] tex-[14px] text-white flex 
               justify-center items-center tracking-[8px]"
               @click="toPlanInfoList">
                    特惠购票
                </div>
                <!-- 电影简介 -->
                <p class=" text-[14px] indent-[2em] px-[10px] leading-6">
                    {{ movieInfo.movie_desc }}
                </p>
            </van-skeleton>
        </div>
    </div>
</template>
<script setup>
import titleBar from "../components/title-bar.vue";
import { useRoute, useRouter } from "vue-router";
import API from "../utils/API/index.js";
import { ref, reactive } from "vue";
let baseURL = ref("http://www.softeem.xin:9999");
const isLoading = ref(true)
const movieInfo = ref(null)
//如何接收路由里的参数？
//在vue里面与路由相关的有两个对象，
//router这个代表 路由管理对象 它专门负责页面的跳转
//rout这个代表路由单体对象，它记录了当前路由的信息
//现在我们是要在当前页面上拿到路由里面的参数，所以应该用rout这个对象
const rout = useRoute();
const router=useRouter();
console.log(rout.query.id)
API.movieInfo.findById(rout.query.id).then(result => {
    movieInfo.value = result;
    isLoading.value = false;
})

const toPlanInfoList= ()=>{
    router.push({
        name:"planInfoList",
        query:{
            id:rout.query.id
        }
    })
}
</script>
<style scoped lang="scss">
</style>